<!-- <template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <p class="inforMainHd">{{serverBaseInfo.ip}}<i v-if="serverBaseInfo.remark">（{{serverBaseInfo.remark}}）</i><b class="time_text">{{time}}</b> <span @click="goBack">返回</span></p>
            </div>
          </template>
          <div class="body">
            <h3 class="inforTitle">系统信息</h3>
            <p class="inforContent inforMt"><strong>主机名：</strong>{{serverBaseInfo.hostName}}，<strong>系统描述：</strong>{{serverBaseInfo.systemDesc}}，<strong>版本：</strong>{{serverBaseInfo.version}}，<strong>cpu核数：</strong>{{serverBaseInfo.cpuNumber}}，<strong>cpu型号：</strong>{{serverBaseInfo.cpuModel}}，<strong>运行进程数量：</strong>{{serverBaseInfo.runProcessNumber}}
            <br/><strong>物理总内存：</strong>{{serverBaseInfo.memTotal}}G ，<strong>交换区总内存：</strong>{{serverBaseInfo.swapTotal}}G，<strong>交换区内存已使用：</strong>{{serverBaseInfo.swapUsed}}% ，<strong>启动时间：</strong>{{serverBaseInfo.startTime||'无'}}，<strong>运行时间：</strong>{{serverBaseInfo.runTime||'无'}}，<strong>agent版本：</strong>{{serverBaseInfo.agentVersion}}，<strong>agent上报时间(秒)：</strong>120</p>
            <div class="rate_block">
              <div class="rate_item rate_cpu">
                <div class="rate_icon"><i></i></div>
                <div class="rate_usage">
                  <p>当前CPU使用率</p>
                  <span>{{infor.cpuUsageRate}}%</span>
                </div>
              </div>
              <div class="rate_item rate_mem">
                <div class="rate_icon"><i></i></div>
                <div class="rate_usage">
                  <p>当前内存使用率</p>
                  <span>{{infor.memUsageRate}}%</span>
                </div>
              </div>
              <div class="rate_item rate_process">
                <div class="rate_icon"><i></i></div>
                <div class="rate_usage">
                  <p>监控进程</p>
                  <span><i>{{monitorProcess.offLineNum}}</i>/{{monitorProcess.totalNum}}</span>
                </div>
              </div>
              <div class="rate_item rate_port">
                <div class="rate_icon"><i></i></div>
                <div class="rate_usage">
                  <p>监控端口</p>
                  <span><i>{{monitorPort.offLineNum}}</i>/{{monitorPort.totalNum}}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="16" class="col_block">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">系统指标</div>
          </template>
          <div class="sys_block">
            <div class="sys_header">
              <span>指标</span>
              <span>当前值</span>
              <span>历史最高</span>
            </div>
            <div class="sys_body">
              <p>
                <span>系统负载1分钟</span>
                <span class="sys_green"><i>{{sysIndex.laOneCurrentValue}}</i></span>
                <span class="sys_red"><i>{{sysIndex.laOneRecordHigh}}</i></span>
              </p>
              <p>
                <span>系统负载5分钟</span>
                <span class="sys_green"><i>{{sysIndex.laFiveCurrentValue}}</i></span>
                <span class="sys_red"><i>{{sysIndex.laFiveRecordHigh}}</i></span>
              </p>
              <p>
                <span>系统负载15分钟</span>
                <span class="sys_green"><i>{{sysIndex.laFifteenCurrentValue}}</i></span>
                <span class="sys_red"><i>{{sysIndex.laFifteenRecordHigh}}</i></span>
              </p>
            </div>
          </div>
          <div class="chart_btn" @click="goToChart"><el-button>查看图表</el-button></div>
        </el-card>
      </el-col>
      <el-col :sm="8" class="col_block">
        <div class="useRate_item bg-warning">
          <img src="../../../assets/images/icon_right_2.png" class="useRate_img" />
          <div class="useRate_right">
            <p>最近60天cpu使用率最高</p>
            <span>{{infor.cpuHUseRate60day}}%</span>
          </div>
        </div>
        <div class="useRate_item  bg-success">
          <img src="../../../assets/images/icon_right_1.png" class="useRate_img" />
          <div class="useRate_right">
            <p>最近60天内存使用率最高</p>
            <span>{{infor.memHUseRate60day}}%</span>
          </div>
        </div>
        <div class="useRate_item  bg-info">
          <img src="../../../assets/images/icon_right_3.png" class="useRate_img" />
          <div class="useRate_right">
            <p>上报数据频率(秒)</p>
            <span>120</span>
          </div>
        </div>
      </el-col>
      <el-col class="col_block">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">磁盘空间信息</div>
          </template>
          <div class="inforMt">
            <el-table :data="diskBaseInfo">
              <el-table-column label="盘符名称" align="center" prop="devName" />
              <el-table-column label="磁盘空间" align="center">
                <template #default="scope">{{scope.row.diskSpace}}G</template>
              </el-table-column>
              <el-table-column label="已使用" align="center">
                <template #default="scope">{{scope.row.used}}G</template>
              </el-table-column>
              <el-table-column label="可用" align="center">
                <template #default="scope">{{scope.row.avail}}G</template>
              </el-table-column>
              <el-table-column label="已使用%" align="center">
                <template #default="scope">{{scope.row.usePercent}}%</template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col class="col_block">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">进程列表</div>
          </template>
          <div class="inforMt">
            <el-table :data="processList">
              <el-table-column label="序号" width="55">
                <template #default="scope">{{scope.$index+1}}</template>
              </el-table-column>
              <el-table-column label="进程名称" align="center" prop="procName" />
              <el-table-column label="PID" align="center" prop="pid" />
              <el-table-column label="内存使用率%" align="center">
                <template #default="scope"><span class="scope_percent">{{scope.row.memory}}</span></template>
              </el-table-column>
              <el-table-column label="CPU使用率%" align="center">
                <template #default="scope"><span class="scope_percent">{{scope.row.cpu}}</span></template>
              </el-table-column>
              <el-table-column label="读取" align="center" prop="readMb" />
              <el-table-column label="写入" align="center" prop="writtenMb" />
              <el-table-column label="线程数" align="center" prop="threadCount" />
              <el-table-column label="监控状态" align="center">
                <template #default="scope">
                  <span v-if="scope.row.monitorState=='1'" class="scope_percent">监控中</span>
                </template>
              </el-table-column>
              <el-table-column label="更新时间" align="center" prop="updateTime" width="100" />
              <el-table-column label="操作" align="center">
                <template #default="scope">
                  <el-button @click="tableChart(scope.row)" class="table_chart_btn">图表</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col class="col_block">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">端口监控列表</div>
          </template>
          <div class="inforMt">
            <el-table :data="monitorPortList">
              <el-table-column label="序号" width="55">
                <template #default="scope">{{scope.$index+1}}</template>
              </el-table-column>
              <el-table-column label="Telnet IP" align="center" prop="telnetIp" />
              <el-table-column label="Telnet端口" align="center">
                <template #default="scope">
                  <span :class="[scope.row.portState==2?'scope_proc_red':'']">{{scope.row.telnetPort}}</span>
                </template>
              </el-table-column>
              <el-table-column label="名称" align="center" prop="name" />
              <el-table-column label="端口状态" align="center">
                <template #default="scope">
                  <span v-if="scope.row.portState==1" class="scope_percent">正常</span>
                  <span v-if="scope.row.portState==2" class="scope_proc_red">失败</span>
                </template>
              </el-table-column>
              <el-table-column label="监控状态" align="center">
                <template #default="scope">
                  <span v-if="scope.row.monitorState=='1'" class="scope_percent">监控中</span>
                </template>
              </el-table-column>
              <el-table-column label="更新时间" align="center" prop="updateTime" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getPortrpait } from '@/api/common';
import * as echarts from 'echarts';

const router = useRoute();
const { proxy } = getCurrentInstance();
const infor = ref({});
const monitorProcess = ref({});
const monitorPort = ref({});
const serverBaseInfo = ref({});
const sysIndex = ref({});
const diskBaseInfo = ref([]);
const processList = ref([]);
const monitorPortList = ref([]);
const data = reactive({
  queryParams: {
    ip: router.query.ip
  },
  time: router.query.time
});
const { queryParams, time } = toRefs(data);

//获取数据
function getData() {
  proxy.$modal.loading("正在加载");
  console.log('---------------',queryParams.value)
  getPortrpait((queryParams.value)).then(response => {
    proxy.$modal.closeLoading();
    infor.value = response.data;
    monitorProcess.value = response.data.monitorProcess;
    monitorPort.value = response.data.monitorPort;
    serverBaseInfo.value = response.data.serverBaseInfo;
    sysIndex.value = response.data.sysIndex;
    diskBaseInfo.value = response.data.diskBaseInfo;
    processList.value = response.data.processList;
    monitorPortList.value = response.data.monitorPortList;


  })
}

//查看图表
function goToChart(){
  proxy.$router.push("/system/host-chart/infor?ip="+queryParams.value.ip);
}

//列表-图表
function tableChart(row){
  proxy.$router.push("/system/process-chart/infor?id="+row.pid);
}

//返回
function goBack(){
  proxy.$router.go(-1);
}
getData();
</script>

<style scoped>
.inforMainHd{
  padding: 5px 0;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  overflow: hidden;
}
.inforMainHd i{
  font-style: normal;
}
.inforMainHd span{
  float: right;
  font-size: 14px;
  color: rgb(64, 158, 255);
  cursor: pointer;
}
.inforTitle{
  color: #000;
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
  padding: 5px 0;
  margin: 0;
}
.inforContent{
  color: #000;
  font-size: 14px;
  line-height: 24px;
  margin: 0;
}
.time_text{
  color: #fff;
  background-color: #dc3545;
  font-weight: bold;
  font-size: 14px;
  padding: 3px 8px;
  border-radius: 3px;
  margin-left: 10px;
}
.inforContent strong{
  font-weight: bold;
}
.inforTitle span{
  margin-right: 10px;
}
.inforTitle i{
  width: 0;
  height: 0;
  margin-right: 3px;
  vertical-align: middle;
  display: inline-block;
}
.inforTitle .zuigao{
  color: #d81b60;
}
.inforTitle .zuigao i{
  border-top: 5px solid #d81b60;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.inforTitle .pingjun{
  color: #f4c512;
}
.inforTitle .pingjun i{
  border-right: 5px solid #f4c512;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.inforTitle .zuidi{
  color: #55d327;
}
.inforTitle .zuidi i{
  border-bottom: 5px solid #55d327;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.inforMt{
  margin-bottom: 15px;
}
.rate_block{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rate_item{
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 3px;
  width: 24%;
  box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
}
.rate_usage p{
  font-size: 14px;
  line-height: 30px;
  margin: 0;
}
.rate_usage{
  padding-left: 10px;
}
.rate_usage span{
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
}
.rate_usage span i{
  font-style: normal;
  color: rgb(255, 69, 0);
}
.rate_icon{
  width: 70px;
  height: 70px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rate_icon i{
  width: 35px;
  height: 35px;
}
.rate_cpu .rate_icon{
  background: #17a2b8;
}
.rate_cpu .rate_icon i{
  background: url("../../../assets/images/icon_cpu.png") no-repeat;
  background-size: contain;
}
.rate_mem .rate_icon{
  background: #dc3545;
}
.rate_mem .rate_icon i{
  background: url("../../../assets/images/icon_xx.png") no-repeat;
  background-size: contain;
}
.rate_process .rate_icon{
  background: #28a745;
}
.rate_process .rate_icon i{
  background: url("../../../assets/images/icon_jc.png") no-repeat;
  background-size: contain;
}
.rate_port .rate_icon{
  background: #ffc107;
}
.rate_port .rate_icon i{
  background: url("../../../assets/images/icon_dk.png") no-repeat;
  background-size: contain;
}
.col_block{
  margin-top: 10px;
}
.sys_block{
  margin-top: -15px;
}
.sys_header{
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 40px;
  border-bottom: 1px solid #ebeef5;
}
.sys_header span{
  width: 30%;
  text-align: center;
}
.sys_header span:first-child{
  width: 40%;
}
.sys_header span:last-child{
  width: 20%;
}
.sys_body p{
  margin: 0;
  font-size: 14px;
  padding: 8px 0;
  line-height: 26px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
}
.sys_body p:nth-child(2n-1){
  background: #f2f2f2;
}
.sys_body span{
  width: 30%;
  text-align: center;
}
.sys_body span:first-child{
  width: 40%;
}
.sys_body span:last-child{
  width: 20%;
}
.sys_body span i{
  font-style: normal;
  color: #fff;
  padding: 3px 6px;
  font-weight: bold;
  border-radius: 3px;
}
.sys_green i{
  background-color: #28a745;
}
.sys_red i{
  background-color: #dc3545;
}
.chart_btn{
  margin-top: 20px;
}
.chart_btn button{
  background: #17a2b8;
  width: 90px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  color: #fff;
  font-size: 14px;
  border-radius: 3px;
  border: 0;
}
.useRate_item{
  width: 100%;
  height: 80px;
  box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
  border-radius: 3px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 20px;
}
.bg-warning{
  background-color: #ffc107;
}
.bg-success{
  background-color: #28a745;
}
.bg-info{
  background-color: #17a2b8;
}
.useRate_img{
  width: 30px;
  height: 30px;
}
.useRate_right{
  padding-left: 15px;
  color: #fff;
}
.useRate_item:first-child .useRate_right{
  color: #333;
}
.useRate_right p{
  font-weight: bold;
  margin: 0;
  font-size: 14px;
}
.useRate_right span{
  font-weight: bold;
  font-size: 14px;
  line-height: 26px;
}
.scope_percent{
  font-weight: bold;
  background: #409eff;
  padding: 3px 6px;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
}
.table_chart_btn{
  background: #409eff;
  width: 60px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  border: 0;
}
.scope_proc_red{
  font-weight: bold;
  background: #e15361;
  padding: 3px 6px;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
}
</style> -->
